<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端开发之视口 viewport</title>
</head>

<body>
  <h3>一. 什么是视口</h3>
  <p>viewport 视口就是浏览器显示页面内容的屏幕区域, 视口可以分为 布局视口/视觉视口/理想视口 </p>
  <h4>1. layout viewport</h4>
  <p>ios/android 基本将这个视口设置为 980px 分辨率, 不过元素看上去很小, 需要手动缩放页面; 并不适合移动端</p>
  <h4>2. visual viewport</h4>
  <p>指用户可以看到的网页区域</p>
  <h4>3. ideal viewport</h4>
  <p>最理想的浏览和阅读宽度; 由乔布斯创建</p>
  <p>手动添加 meta 视口标签通知浏览器操作: 目的是设备有多宽, 视口就有多宽</p>

  <h3>二. meta 视口标签</h3>
  <code>
    标准的视口设置: <br>
    meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" <br>
    meta标签 名称="视口" 内容="宽度=设备宽度, 用户缩放=是否被允许, 初始化缩放比=1.0, 最大缩放比=1.0, 最小缩放比=1.0
  </code>
</body>

</html>